<template>
  <div class="my-consign">
    <menu-content-layout title="我的委托">
      <template slot="icon">
        <img src="~/assets/images/my-consign1.png" alt="" />
      </template>
      <template slot="content">
        <menu-content-tabs :tabs="tabs" @switch-tab="handleSwitchTab" />
        <div v-if="$route.name === 'MyConsign'" class="list-wrap">
          <div class="list">
            <div
              class="item"
              v-for="(item, index) in list" 
              :key="index"
              @click="handleToDetail(item.status,item.id)"
            >
              <div class="pic">
                <img :src="item.img_list[0] || noPic" class="objectCover" />
              </div>
              <div class="info">
                <div class="number">委托编号：{{ item.demand_order }}</div>
                <div class="name">产品名称：{{ item.goods_info }}</div>
                <div class="btn" v-if="[1,2,3,4,9].includes(item.status)">{{ item.status === 1 ? '待发布' : item.status === 2 ? '草稿' : item.status === 4 ? '审核失败' : item.status === 3 ? '已完成' : '已关闭'}}</div>
                <div v-else>
                  0<div v-if="item.content[item.content.length - 1] && item.content[item.content.length - 1
                  ].status === 1" class="date">
                  最后一次响应：用户回复 {{ item.create_time }}
                </div>
                <div v-if="item.content[item.content.length - 1] && item.content[item.content.length - 1].status === 0" class="date new">
                  最后一次响应：平台回复 {{ item.update_time }}
                  <img src="~/assets/images/new-float-icon.png" alt="" /> 
                </div>
                </div>
              </div>
            </div>
          </div>
          <nodata message="暂时没有委托" :status="listStatus"></nodata>
          <m-pagination
            :pagination="total"
            :page-size="limit"
            @changePage="changeThisPage"
          />
        </div>
        <!-- 委托列表 -->
        <router-view />
      </template>
    </menu-content-layout>
    <m-dialog title="平台提示" :show-dialog.sync="showDialog">
      <p class="text" style="paltform_tip">
        发布则默认您已阅读，理解并同意找包装网的委托平台规则。 是否立即发布？
      </p>
      <div class="btns flex-center">
        <m-button
          width="180"
          class="mrt10"
          type="dark"
          @click="closeTc"
        >取消</m-button>
        <m-button width="180" @click="publish">确定</m-button>
      </div>
    </m-dialog>
  </div>
</template>

<script>
import MenuContentLayout from "@/components/common/menu-content-layout/MenuContentLayout"
import MenuContentTabs from "@/components/common/menu-content-tabs/MenuContentTabs"
import MPagination from "@/components/common/m-pagination/MPagination"
import MButton from "@/components/common/m-button/MButton"
import MDialog from "@/components/common/m-dialog/MDialog"
import { getMyDemands, pubMyDemands } from "@/request/api"

export default {
  name: "MyConsign",
  components: {
    MButton,
    MPagination,
    MenuContentTabs,
    MenuContentLayout,
    MDialog
  },
  data() {
    return {
      tabs: [
        { name: "全部委托", value: "-1" },
        { name: "待发布", value: "2" },
        { name: "进行中", value: "0" },
        { name: "已完成", value: "3" },
        { name: "已关闭", value: "9" },
      ],
      list: [],
      listStatus: 1,
      page: 1,
      total: 1,
      noPic: require("assets/images/nopic.jpg"),
      limit: 5,
      state: -1,
      showDialog: false,
      optionId: ""
    }
  },
  created() {
    this.getList()
  },
  methods: {
    handleSwitchTab(index) {
      this.state = index.value;
      this.getList();
      // 详情页面中切换tab返回
      if (this.$route.name === "MyConsignDetails") {
        this.$router.push({ name: "MyConsign" });
      }
    },
    handleToDetail(status,id) {
      if(status === 9) return false;
      this.$router.push({ path: 'my-consign/details/' + id });
    },
    getList() {
      this.list = []
      this.listStatus = 1
      this.$common.toTop()
      let data = {
        page: this.page,
        limit: this.limit,
        data: {
          demand_type: 1,
          state: this.state
        }
      }
      getMyDemands(data).then((res) => {
        if (res.status === 200) {
          this.list = res.data.data
          this.total = res.data.total
          if (this.total === 0) {
            this.listStatus = 0
          } else {
            this.listStatus = 2
          }
          window.scrollTo({ top: 0 })
        } else {
          this.listStatus = 0
          this.$toast.show(res.message, 1000, false)
        }
      }).catch(err => {
        this.$message.error(err.message)
      })
    },
    changeThisPage(page) {
      this.page = page;
      this.getList();
    },
    showTc(id) {
      this.showDialog = true;
      this.optionId = id;
    },
    closeTc() {
      this.showDialog = false;
      this.optionId = '';
    },
    /** 发布
     * @param { int } optionId 发布id
     * @param { string } status 0
     */
    publish() {
      let that = this
      that.showDialog = false
      pubMyDemands({id: that.optionId, status: 0}).then((res) => {
        if (res.status === 200) {
          that.$toast.show("发布成功", 1000, false)
          that.getList()
        } else {
          that.$toast.show(res.message, 1000, false)
        }
      }).catch(err => {
        that.$message.error(err.message)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import "~@/assets/style/common.scss";
/deep/ .noBg .el-button {
  background: none !important;
}
.my-consign {
  .list {
    margin-top: 30px;
    margin-bottom: 50px;

    .item {
      background-color: rgb(243, 244, 247);
      border: solid 1px #eaeaea;
      padding: 5px;
      display: flex;
      align-items: flex-start;
      position: relative;
      cursor: pointer;

      &:not(:last-of-type) {
        margin-bottom: 15px;
      }

      .pic {
        width: 90px;
        height: 90px;
        margin-top: 10px;
        margin-right: 15px;
        img {
          border-radius: 50%;
        }
      }

      .info {
        padding: 10px 0;
        position: relative;
        margin-top: 10px;

        .number {
          margin-bottom: 10px;
        }

        .btn {
          width: 70px;
          height: 20px;
          line-height: 20px;
          border-radius: 5px;
          margin-top: 5px;
          color: #fff;
          font-size: 12px;
          text-align: center;
          background-color: #666;
        }
        .date {
          margin-top: 5px;
        }

        .new {
          color: $theme-color-1;
          position: relative;

          img {
            position: absolute;
            right: -24px;
            top: -8px;
          }
        }
      }

      .btns {
        height: 110px;
        position: absolute;
        right: 15px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        top: 30px;
      }
      .platfomr_tip {
        margin-bottom: 50px; 
        font-size: 16px; 
        line-height: 26px
      }
    }
  }
}
</style>
